<script lang="ts" setup>
import { ref, onBeforeMount, onActivated } from "vue";
import { UserStore } from "@/store";
import { showSuccessToast, Popup } from "vant";
import { useRouter } from "vue-router";
import { RouterEnums } from "@/types";
import avatar from "@/image/new_img/logo1080FgzU_320.png";
import copy from "copy-to-clipboard";
import { GetMediaConfigList } from "@/types/user.ts";
import { useI18n } from "vue-i18n";
import { FiltrationFun } from "@/utils";
import { Divider } from "vant";
import { Cell, CellGroup } from "vant";
import { RadioGroup, Radio } from "vant";
import { setI18nLanguage } from "@/locales/i18n";
const { locale, t } = useI18n();
interface letfBannerList {
  banner: string;
  bannerPosition: number;
  hyperlinkName: string;
  hyperlinkType: number;
  id: number;
  jumpWay: number;
  rankId: number;
  remark: string;
}
const router = useRouter();
const userStore = UserStore();
const overlayShow = ref(false);
const props = defineProps<{
  leftBanner: letfBannerList[];
  mediaList: GetMediaConfigList[];
  propsOverlayShow: boolean;
}>();

onActivated(() => {
  overlayShow.value = props.propsOverlayShow;
  if (!props.propsOverlayShow) {
    watchClose();
  }
});
const setSidebar = () => {
  overlayShow.value = true;
};
const copyUserID = () => {
  // navigator.clipboard.writeText("ddddd");
  copy(userStore.userLoginInfo.account.uid.toString());
  showSuccessToast("Success");
};
defineExpose({ setSidebar });
onBeforeMount(() => {
  if (localStorage.getItem("openSidebar")) {
    overlayShow.value = true;
  } else {
    overlayShow.value = false;
  }
  initLang();
});
const closeSidebar = () => {
  overlayShow.value = false;
  localStorage.removeItem("openSidebar");
};
//关闭侧边栏时候触发
const watchClose = () => {
  localStorage.removeItem("openSidebar");
};
//Banner图片配置
const gotoPage = item => {
  if (item.jumpWay === 1) {
    router.push(item.hyperlinkName);
  } else {
    window.open(item.hyperlinkName);
  }
};
const openLink = item => {
  if (item.mediaLink && item.mediaLink !== "") {
    window.open(item.mediaLink);
  }
};
const emits = defineEmits(["openFirstAid"]);
const overlayLangShow = ref(false);

// 语言选择框
const langChecked = ref("1");
const changeLang = item => {
  switch (item) {
    case "1":
      setI18nLanguage("en");
      break;
    case "2":
      setI18nLanguage("bn");
      break;
  }
};
const initLang = () => {
  // console.log("###locale", locale.value);
  switch (locale.value) {
    case "en":
      langChecked.value = "1";
      break;
    case "bn":
      langChecked.value = "2";
      break;
  }
};
//跳转提现页面
const gotoWithdrawal = () => {
  if (userStore.isLogin) {
    router.push(RouterEnums.WITHDRAWALS);
  } else {
    router.push(RouterEnums.LOGIN);
  }
};
</script>
<template>
  <!-- 首页的侧边栏 -->
  <div>
    <Popup
      v-model:show="overlayShow"
      position="left"
      :lock-scroll="true"
      :safe-area-inset-top="true"
      :safe-area-inset-bottom="true"
      :style="{ position: 'absolute', width: '7.15rem', height: '100%', overflow: 'hidden' }"
      z-index="510"
      @click.self="overlayShow = false"
      @close="watchClose"
    >
      <!-- <div class="content-background"></div> -->
      <div class="content-frame">
        <div class="content-div-frame">
          <div class="daohng-frame">
            <div class="daohng-content df ai-center jc-space-between">
              <div class="fanhui-frame df ai-center jc-center">
                <img class="fanhui" src="@/image/new_img/huitui_bai.png" @click="closeSidebar" />
              </div>
              <img class="wan-zan-dizi" src="@/image/new_img/home/wan_zan_dizi.png" />
            </div>
          </div>
          <!-- <img class="left-diwen" src="@/image/new_img/home/homev2_left_diwen.png" /> -->
          <div class="homepage-conten">
            <div class="homepage-frame">
              <img
                v-if="!userStore.isLogin"
                class="left-login"
                src="@/image/new_img/home/homev2_left_login.png"
                @click="router.push(RouterEnums.LOGIN)"
              />
              <div v-else class="df userInfo-frame">
                <div class="user-img-frame df" @click="router.push(RouterEnums.USERSET)">
                  <img
                    class="user-img"
                    :src="
                      userStore.userInfoDetails.profile.avatar !== ''
                        ? userStore.userInfoDetails.profile.avatar
                        : avatar
                    "
                  />
                </div>
                <div class="user-right">
                  <div class="user-name df ai-center">
                    <div class="username omit-1" @click="router.push(RouterEnums.USERSET)">
                      {{ userStore.userInfoDetails.profile.name }}
                    </div>
                    <img
                      class="actlevel-img sdsss"
                      :src="FiltrationFun.getActLeve()"
                      @click="router.push(RouterEnums.LEVELREWARDSPAGE)"
                    />
                    <div class="usergrade df ai-center jc-center">
                      V{{ userStore.userInfoDetails.account.vipLevel }}
                    </div>
                  </div>
                  <div class="userId-frame df" @click="copyUserID">
                    <div>ID：{{ userStore.userLoginInfo.account.uid }}</div>
                    <img class="copy-bai-frame" src="@/image/new_img/home/copy_bai.png" />
                  </div>
                </div>
              </div>
            </div>
            <div class="module-frame df ai-center">
              <img
                class="left-topup"
                src="@/image/new_img/home/homev2_left_topup.png"
                @click="router.push(RouterEnums.RECHARGE)"
              />
              <img
                class="left-topup marginLeft10"
                src="@/image/new_img/home/homev2_left_refund.png"
                @click="gotoWithdrawal()"
              />
            </div>
            <div v-if="props.leftBanner.length > 0" class="activity-frame">
              <img
                v-for="(item, index) in props.leftBanner"
                :key="index"
                class="activity-img"
                :src="item.banner"
                @click="gotoPage(item)"
              />
            </div>
            <div class="user-module-list">
              <div class="text-white language-box" @click="overlayLangShow = !overlayLangShow">
                <div class="fl" style="font-weight: 600; font-size: 15px">
                  <div class="img-box">
                    <img class="network-icon" src="@/image/new_img/network.png" alt="" />
                  </div>
                  {{ t("other.useCurrentLang") }}
                </div>
                <img class="lower-icon" src="@/image/new_img/lower.png" alt="" />
              </div>
              <div
                class="module-content-frame df ai-center"
                @click="router.push(RouterEnums.ACTIVITY_LIST)"
              >
                <div class="module-image-frame df ai-center jc-center">
                  <img class="module-image" src="@/image/new_img/home/huodongrukou2_bai.png" />
                </div>
                <div class="module-name">
                  {{ t("userSet.moduleName") }}
                </div>
              </div>
              <div
                class="module-content-frame df ai-center"
                @click="router.push(RouterEnums.GAMELOG)"
              >
                <div class="module-image-frame df ai-center jc-center">
                  <img class="module-image" src="@/image/new_img/home/Log_bai.png" />
                </div>
                <div class="module-name">
                  {{ t("userSet.moduleName1") }}
                </div>
              </div>
              <div
                class="module-content-frame df ai-center"
                @click="router.push(RouterEnums.USERSET)"
              >
                <div class="module-image-frame df ai-center jc-center">
                  <img class="module-image" src="@/image/new_img/home/setting_bai.png" />
                </div>
                <div class="module-name">
                  {{ t("userSet.moduleName2") }}
                </div>
              </div>
              <div
                class="module-content-frame df ai-center"
                @click="
                  () => {
                    emits('openFirstAid');
                  }
                "
              >
                <div class="module-image-frame df ai-center jc-center">
                  <img class="module-image" src="@/image/new_img/home/kefu_bai.png" />
                </div>
                <div class="module-name">
                  {{ t("userSet.moduleName3") }}
                </div>
              </div>
            </div>
            <div class="share-fraem df ai-center">
              <div
                v-for="(item, index) in props.mediaList"
                :key="index"
                class="share-list-img"
                @click="openLink(item)"
              >
                <img
                  class="share-img"
                  :src="item.customBuoy === '' ? item.defaultBuoy : item.customBuoy"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </Popup>
    <!-- 弹窗选择语言 -->
    <Popup v-model:show="overlayLangShow" :style="{ padding: '10px' }" round>
      <div class="lang-popup">
        <!--  -->
        <div class="lang-popup-item">
          <div class="fc" style="margin-bottom: 10px">
            <div class="fl" style="color: #999999">
              <!-- 图标/语言显示 -->
              <img class="wh-18 mr-5" src="@/image/new_img/network2.png" alt="" />
              {{ t("other.language") }}
            </div>
          </div>
          <RadioGroup v-model="langChecked" @change="changeLang">
            <CellGroup inset>
              <Cell title="单选框 1" clickable @click="langChecked = '1'">
                <template #title>
                  <div class="fl">
                    <img class="wh-18 mr-5" src="@/image/new_img/us.png" alt="" />
                    {{ `English` }}
                  </div>
                </template>
                <template #right-icon>
                  <Radio name="1" checked-color="#B454E9" icon-size="15px" />
                </template>
              </Cell>
              <Divider />
              <Cell title="单选框 2" clickable @click="langChecked = '2'">
                <template #title>
                  <div class="fl">
                    <img class="wh-18 mr-5" src="@/image/new_img/bd.png" alt="" />
                    {{ `বাংলা` }}
                  </div>
                </template>
                <template #right-icon>
                  <Radio name="2" checked-color="#B454E9" icon-size="15px" />
                </template>
              </Cell>
            </CellGroup>
          </RadioGroup>
        </div>
      </div>
    </Popup>
    <!-- 弹窗关闭按钮 -->
    <div class="lang-popup-close" @click="overlayLangShow = false" v-if="overlayLangShow">
      <img class="wh-18" src="@/image/new_img/close.png" alt="" />
    </div>
  </div>
</template>
<style lang="less" scoped>
.sidebar-frame {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sidebar-frame::-webkit-scrollbar {
  display: none;
}
.content-frame {
  width: 100%;
  height: 100%;
  background: #000000;
  z-index: 5;
  overflow: hidden;
}
.content-div-frame {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    21deg,
    rgba(254, 121, 25, 0.25) 15%,
    rgba(201, 63, 205, 0.5) 100%
  );
  //backdrop-filter: blur(100px);
  overflow: hidden;
}
.content-frame::-webkit-scrollbar {
  display: none;
}
/deep/.van-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}
.left-diwen {
  width: 100%;
  height: auto;
}
.daohng-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 128.68px;
  z-index: 50;
  .daohng-content {
    width: 100%;
    height: 100%;
  }
  .wan-zan-dizi {
    width: 206px;
    height: 48px;
    margin-right: 50px;
  }
  .fanhui-frame {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #ffffff33;
    margin-left: 48px;
    .fanhui {
      width: 48px;
      height: 48px;
      opacity: 0.45;
    }
  }
}
.homepage-conten {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 86px;
  z-index: 20;
  .homepage-frame {
    width: 100%;
    height: 100%;
    margin-top: 60px;
  }
}
.left-login {
  width: 440px;
  height: 100px;
  margin-left: 48px;
}
.module-frame {
  width: 100%;
  height: auto;
  margin-left: 48px;
  margin-top: 40px;
}
.left-topup {
  width: 210px;
  height: 100px;
}
.marginLeft10 {
  margin-left: 20px;
}
.activity-frame {
  margin-left: 48px;
  margin-top: 30px;
  .activity-img {
    width: 440px;
    height: 96px;
    object-fit: cover;
    margin-bottom: 10px;
    border-radius: 20px;
  }
}
.user-module-list {
  width: 100%;
  padding-left: 48px;
  margin-top: 30px;
  .user-module {
    width: 440px;
    height: 105px;
    margin-bottom: 10px;
  }
}
.userInfo-frame {
  width: calc(100% - 60px);
  height: auto;
  padding-left: 30px;
  .user-img-frame {
    width: 105.5px;
    height: 105.5px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 34px;
    overflow: hidden;
  }
  .user-img {
    width: 105.5px;
    height: 105.5px;
  }
}
.user-right {
  width: 70%;
  margin-left: 16px;
  padding-top: 10px;
}
.user-name {
  width: 100%;
  height: auto;
  .username {
    max-width: 200px;
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    padding-top: 5px;
  }
  .usergrade {
    margin-left: 10px;
    border-radius: 12px;
    font-size: 18px;
    padding: 4px 8px 4px 8px;
    background-color: #ab3fe7;
    color: #ffffff;
    //text-align: center;
  }
}
.userId-frame {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 20px;
}
.copy-bai-frame {
  height: 24px;
  width: 24px;
  margin-left: 6px;
}
.actlevel-img {
  width: 40px;
  height: 40px;
  margin-left: 12px;
}
.share-list-img {
  width: 90px;
  height: 90px;
  margin-left: 20px;
  .share-img {
    width: 90px;
    height: 90px;
  }
}
.content-background {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #00000080;
}
:deep(.van-popup--left) {
  background-color: #00000080;
}
:deep(.van-overlay) {
  backdrop-filter: blur(5px);
}

.module-content-frame {
  width: 100%;
  height: 106px;
  padding-bottom: 16px;
  .module-image-frame {
    width: 66px;
    height: 66px;
    margin-right: 16px;
    border-radius: 24px;
    background-image: linear-gradient(
      45deg,
      rgba(254, 121, 25, 0.25) 0%,
      rgba(171, 63, 231, 0.25) 100%
    );
  }
  .module-name {
    font-size: 28px;
    font-weight: 700;
    color: #ffffffd9;
  }
  .module-image {
    height: 42px;
    width: 42px;
  }
}
.text-white {
  color: white;
}
.img-box {
  width: 66px;
  height: 66px;
  border-radius: 24px;
  background-color: #70312c;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 42px;
    height: 42px;
  }
  margin-right: 16px;
}
.language-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 26px;
  height: 132px;
  .lower-icon {
    width: 18px;
    height: 16px;
    margin-right: 80px;
  }
}
.fl {
  display: flex;
  align-items: center;
}
.fc {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fs {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
// 语言弹窗
.lang-popup {
  width: 85vw;
  height: auto;
  // margin: 0 40px;
  font-size: 22px;
  position: relative;
}
.lang-popup-item {
  // border-bottom: 1px solid #999999;
  height: auto;
}
.wh-18 {
  width: 60px;
  height: 60px;
}
.mr-5 {
  margin-right: 10px;
}
.lang-popup-close {
  width: 60px;
  height: 60px;
  // background-color: white;
  position: fixed;
  z-index: 2014;
  left: 50%;
  top: calc(50% + 256px);
  transform: translate(-61%, -50%);
}
</style>
